import { Card, Space, Table, Image, Descriptions } from 'antd';
import { useLocation } from 'react-router-dom'
const { Column, ColumnGroup } = Table;
import './css/RefundDetails.css'


interface DataType {
    key: React.Key;
    order_number: number;
    order_status: string
    pay_method: string;
    user_account: string;
    submit_time: string;
    order_source: string;
}

const data: DataType[] = [
    {
        key: '1',
        order_number: 2749274948,
        order_status: '代付款',
        pay_method: '未支付',
        user_account: 'New York No',
        submit_time: '2012-12-12 12:23:20',
        order_source: 'App订单'
    }
];
export default function exchangeDetails() {

    // 路由接受参数
	const locatioin = useLocation()
	// 解构出state
	const { state } = locatioin
    
    return (
        // 订单详情/
        <div className='orderdetails'>
            <p className='head'>退款详情</p>
            <Card title="退换货申请详情" type="inner" className='detail_content'>

                {/* 退款描述 */}


                {/* 订单信息 */}
                <div className="order_info">
                    <Descriptions
                        // title="Responsive Descriptions"
                        column={1}
                        bordered
                        size='small'
                        labelStyle={{color:'black',width:'200px',backgroundColor:'#F5FDFF',textAlign:'center'}}
                    // column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
                    >
                        <Descriptions.Item label="订单编号">{state[0].order_number}</Descriptions.Item>
                        <Descriptions.Item label="申请状态">{state[0].apply_status}</Descriptions.Item>
                        <Descriptions.Item label="申请时间">{state[0].apply_time}</Descriptions.Item>
                        <Descriptions.Item label="用户账号">{state[0].user_account}</Descriptions.Item>
                    </Descriptions>
                </div>
                {/* 收货人信息 */}


                <div className="addressee_info">
                    <Descriptions
                        // title="Responsive Descriptions"
                        column={1}
                        bordered
                        size='small'
                        labelStyle={{color:'black',width:'200px',backgroundColor:'#F5FDFF',textAlign:'center'}}
                    >
                        <Descriptions.Item label="订单金额">{state[0].refund_money}</Descriptions.Item>
                        <Descriptions.Item label="确认金额">{state[0].refund_money}</Descriptions.Item>
                        <Descriptions.Item label="退款方式">{state[0].apply_time}</Descriptions.Item>
                        <Descriptions.Item label="售后类型">{state[0].user_account}</Descriptions.Item>
                        <Descriptions.Item label="申请原因">{state[0].user_account}</Descriptions.Item>
                        <Descriptions.Item label="处理意见">{state[0].user_account}</Descriptions.Item>
                        <Descriptions.Item label="处理备注">{state[0].user_account}</Descriptions.Item>
                    </Descriptions>
                </div>
            </Card>
        </div>
    )
}